@charset "utf-8";

.music{
    position:fixed;
    position: relative;
    width: 200px;
//  height: 50px;
    top:20px;
    right: -210px;
//  left: 0;
    margin:0 auto;
    background: transparent;
//  z-index: 200;
    audio{
        position:absolute;
        right: 0;
        left: 5px;
        top: 5px;
//      margin: 0 auto;
        z-index: 200;
//      height: 50px;
        display: block;
        opacity: 0;
    }
          
//      opacity: 0;
    img{
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0px;
        left:0;
        top: 0px;
//      margin: 0 auto;
        z-index: 199;
        transform: rotate(0deg);
        animation: music-img 1.5s linear infinite 0.2s;
    } 
}
//.music-img{
//  img{
//      width: 40px;
//      height: 40px;
//      position: fixed;
//      right: px;
//      left: 83.5%;
//      top: 25px;
//      margin: 0 auto;
//      z-index: 199;
//      transform: rotate(0deg);
//      animation: music-img 1.5s linear infinite 0.2s;
//  }
//}

@keyframes music-img{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
    }
}
#web{
    width: 100%;
    height: 100%;
    position: relative;
   
    .section{
        overflow: hidden;
        z-index: 190;
    }
    .first-page{
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        .first-a{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: 5px;
                right: 0 ;
                top: 150px;
                z-index: 101;
            }  
        }
        .first-d{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: 5px;
                right: 0 ;
                top: 150px;
//              bottom: 0;
                transform: scale(1.02) rotate(0deg);
                z-index: 100;
            }  
        }
        .first-b{
            font-size: 0px;
            img{
                margin:0 auto;
                position: absolute;
                left: 5px;
                right: 0;
                top: 30px;
                transform: scale(2);
                opacity: 0;
                z-index: 102;
            }  
        }
        .first-c{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: -7px;
                right: 0 ;
                top: -300px;
//              bottom: 0;
                z-index: 99;
            }  
        }
        .first-e{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: -150%;
                right: 0 ;
                top: 150px;
//              bottom: 0;
                z-index: 101;
            }  
        }
        .first-f{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: 5px;
                right: -150% ;
                top: 150px;
//              bottom: 0;
                z-index: 101;
            }  
        }
        .first-g{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: -150%;
                right: 0 ;
                top: 150px;
//              bottom: 0;
                z-index: 101;
            }  
        }
        .first-h{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: 5px;
                right: -150% ;
                top: 150px;
//              bottom: 0;
                z-index: 101;
            }  
        }
        .first-i{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: 5px;
                right: 0 ;
                top: 150px;
//              bottom: 0;
                z-index: 100;
            }  
        }
        .first-j{
            font-size: 0;
            img{
                margin:0 auto;
                position: absolute;
                left: 5px;
                right: 0 ;
                top: 150px;
//              bottom: 0;
                z-index: 98;
            }  
        }
        .first-k{
            width: 50px;
            height: 50px;
            background: white;
            border:2px solid black;
            border-radius: 25px;
            font-size:20px ;
            color: black;
            text-align: center;
            line-height: 50px;
            position: absolute;
            left: -260px;
            right: 0;
            top:190px;
            margin: 0 auto;
            opacity: 0;
            transform: scale(3);
        }
        .first-l{
            width: 50px;
            height: 50px;
            background: white;
            border:2px solid black;
            border-radius: 25px;
            font-size:20px ;
            color: black;
            text-align: center;
            line-height: 50px;
            position: absolute;
            position: absolute;
            left: 0px;
            right: -250px;
            top:190px;
            margin: 0 auto;
            opacity: 0;
            transform: scale(3);
        }
        .first-n{
            width: 50px;
            height: 50px;
            background: white;
            border:2px solid black;
            border-radius: 25px;
            font-size:20px ;
            color: black;
            text-align: center;
            line-height: 50px;
            position: absolute;
            position: absolute;
            left: -260px;
            right: 0;
            top:320px;
            margin: 0 auto;
            opacity: 0;
            transform: scale(3);
        }
        .first-m{
            width: 50px;
            height: 50px;
            background: white;
            border:2px solid black;
            border-radius: 25px;
            font-size:18px ;
            color: black;
            text-align: center;
//          line-height: 50px;
            position: absolute;
            position: absolute;
            left: 0px;
            right: -250px;
            top:320px;
            margin: 0 auto;
            opacity: 0;
            transform: scale(3);
        }
        .first-o{
            width: 250px;
            height: 50px;
            background: #FFDA00;
            position: absolute;
            left: 0;
            right: 0;
            top: 430px;
            margin: 0 auto;
            opacity: 0;
            z-index: 103;
        }
        .first-p{
            font-size: 16px;
            width: 250px;
            height: 50px;
            position: absolute;
            left: 20px;
            right: 0;
            top: 435px;
            margin: 0 auto;
            opacity: 0;
            z-index: 104;
        }
        .first-q{
            font-size: 14px;
            width: 250px;
            height: 50px;
            position: absolute;
            left: 90px;
            right: 0;
            top: 455px;
            margin: 0 auto;
            opacity: 0;
            z-index: 104;
        }
        .first-r{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 600px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
            
        }
    }
    .first-page.active{
        .first-a{
            img{
                animation: first-a 0.2s infinite linear 3.7s;
            } 
        }
        .first-b{
            img{
                animation: first-b 0.7s 1 linear 4s forwards;
            } 
        }
        .first-c{
            img{
                animation: first-c 0.5s linear 1 forwards 0.2s;
            }  
        }
        .first-d{
            img{
                animation: first-d 0.18s linear 1;
            }   
        }
        .first-e{
            img{
                animation: first-e 0.8s 3 linear 0.8s forwards; 
            }   
        }
        .first-f{
            img{
                animation: first-f 0.8s 4 linear 0.8s forwards; 
            }   
        }
        .first-g{
            img{
                animation: first-g 0.6s 3 linear 0.8s forwards;
            }  
        }
        .first-h{
            img{
                animation: first-h 0.6s 4 linear 0.8s forwards;
            }      
        }
        .first-i{
            img{
                animation: first-i 0.6s 2 linear 3.7s forwards;
            }      
        }
        .first-j{
            img{
                animation: first-j 0.6s 5 linear 3.7s forwards;
            }    
        }
        .first-k{
                animation: first-k 1.2s 1 forwards 4s linear;     
        }
        .first-l{
                animation: first-l 1.2s 1 forwards 4.2s linear;  
        }
        .first-n{
                animation: first-n 1.2s 1 forwards 4.4s linear; 
        }
        .first-m{
                animation: first-m 1.2s 1 forwards 4.6s linear;     
        }
        .first-o{
                animation: first-o 1s linear forwards 4s 1;     
        }
        .first-p{
                animation: first-p 1s linear forwards 5s 1;   
        }
        .first-q{
                animation: first-q 1s linear forwards 5.5s 1;    
        }
        .first-r{
            img{
                animation: first-r 1s infinite linear 0.4s; 
            }        
        }
    }
    
    //第一个结束
    
    //第二个
    .two-page{
        background: url(../img/frist/first-beijin.png);
        width: 100%;
        height: 100%;
        position: relative;
        .two-a{
            font-size:0 ;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top:-600px;
                margin: 0 auto;
                z-index: 100;
            } 
        }
        .two-b{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: -220px;
                margin: 0 auto;
                z-index: 101;
            }
        }
        .two-c{
            font-size: 0;
            img{
                position: absolute;
                left:80px;
                right: 0;
                top: 185px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .two-d{
            font-size: 0;
            img{
                position: absolute;
                left:200px;
                right: 0;
                top: 255px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
                transform: rotate(34deg);
            }
        }
        .two-e{
            font-size: 0;
            img{
                position: absolute;
                left:0;
                right: -80px;
                top: 228px;
                margin: 0 auto;
                z-index: 101;
                opacity:0 ;
            }
        }
        .two-f{
            font-size: 0;
            img{
                position: absolute;
                left:0;
                right: 103px;
                top: 170px;
                margin: 0 auto;
                z-index: 102;
                transform: scale(0);
            }
        }
        .two-g{
            font-size: 0;
            img{
                position: absolute;
                left:0;
                right: -90px;
                top: 325px;
                margin: 0 auto;
                opacity: 0;
                z-index: 101;
            }
        }
        .two-h{
            width: 256px;
            height: 30px;
            line-height: 30px;
            font-size:12px;
            color: white;
            background: #0E1845;
//          text-align: center;
            text-indent: 24px;
            position: absolute;
            z-index: 105;
            opacity: 0;
            left: -400px;
            right: 0;
            top: 450px;
            margin: 0 auto;
        }
        .two-i{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 600px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
        }
    }
    .two-page.active{
        .two-a{
            img{
                animation: two-a 0.6s 1 forwards linear 0.3s;
            }
        }
        .two-b{
            img{
                animation: two-b 0.5s 1 linear forwards 1.3s;
            }
        }
        .two-c{
            img{
                animation: two-c 0.5s 1 linear forwards 1s;   
            }
        }
        .two-d{
            img{
                animation: two-d 0.5s 1 linear forwards 1s;   
            }
        }
        .two-e{
            img{
                animation: two-e 0.5s 1 linear forwards 1s;   
            }
        }
        .two-f{
            img{
                animation: two-f 0.5s 1 linear forwards 1.8s;    
            }
        }
        .two-g{
            img{
                animation: two-g 0.5s 1 linear forwards 1.1s;
            }       
        }
        .two-h{
            animation: two-h 0.3s 1 linear 2s forwards;
        }
        .two-i{
             img{
                animation: two-i 1s infinite linear 0.4s; 
            } 
        }
    }
    //第二个结束
    
    //第三页开始
    .three-page{
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        .three-a{
            font-size: 0;
            img{
                position: absolute;
                left: 40px;
                right: 0;
                top: -400px;
                margin: 0 auto;
                z-index: 100;
            }
        }
        .three-b{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: -200px;
                margin: 0 auto;
                opacity: 0;
                z-index: 101;
            }
        }
        .three-c{
            font-size: 0;
            img{
                position: absolute;
                left: 100px;
                right: 0;
                top: 165px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
            }
        }
        .three-d{
            font-size: 0;
            img{
                position: absolute;
                left: -350px;
                right:0;
                top: 174px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
            }
        }
        .three-e{
            font-size: 0;
            img{
                position: absolute;
                left: -100px;
                right:0;
                top: 401px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .three-f{
            font-size: 0;
            img{
                position: absolute;
                left: 90px;
                right:0;
                top: 220px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
                transform: scale(0);
            }
        }
        .three-g{
            font-size: 0;
            img{
                position: absolute;
                left: -210px;
                right:0;
                top: 260px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
                transform: scale(0);
            }
        }
        .three-h{
            font-size: 0;
            img{
                position: absolute;
                left: -250px;
                right:0;
                top: 174px;
                margin: 0 auto;
                z-index: 102;
                transform: rotate(10deg) scale(0);
                opacity: 0;
            }
        }
        .three-i{
            font-size: 0;
            img{
                position: absolute;
                left: -250px;
                right:0;
                top: 174px;
                margin: 0 auto;
                z-index: 102;
                transform: rotate(10deg) scale(1);
                opacity: 0;
            }
        }
        .three-j{
            width: 238px;
            height: 30px;
            line-height: 30px;
            font-size:12px;
            color: white;
            background: #0E1845;
//          text-align: center;
            text-indent: 24px;
            position: absolute;
            z-index: 105;
            opacity: 0;
            left: -400px;
            right: 0;
            top: 450px;
            margin: 0 auto;
        }
        .three-k{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 600px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
        }
    }
    .three-page.active{
        .three-a{
            img{
                animation: three-a 0.6s 1 linear forwards 0.3s;   
            }
        }
        .three-b{
            img{
                animation: three-b 0.5s 1 linear forwards 1s;    
            }
        }
        .three-c{
            img{
                animation: three-c 0.5s 1 linear forwards 0.6s;    
            }
        }
        .three-d{
            img{
                animation: three-d 0.5s 1 linear forwards 1s;
            }
        }
        .three-e{
            img{
                animation: three-e 0.5s 1 linear forwards 0.7s;    
            }
        }
        .three-f{
            img{
                animation: three-f 0.5s 1 linear forwards 0.8s;    
            }
        }
        .three-g{
            img{
                animation: three-g 1s 1 linear forwards 1.2s;    
            }
        }
        .three-h{
            img{
                animation: three-h 0.5s 1 linear forwards 2.3s;    
            }
        }
        .three-i{
            img{
                animation: three-i 0.2s infinite linear forwards 2.9s;    
            }
        }
        .three-j{
            animation: three-j 0.3s 1 linear 3.1s forwards;   
        }
        .three-k{
            img{
                animation: three-k 1s infinite linear 0.4s; 
            }    
        }
    }
    //第三页结束
    
    //第四页开始
    .four-page{
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        .four-a{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: -200px;
                margin: 0 auto;
                z-index: 100;
            }
        }
        .four-b{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: -200px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .four-c{
            font-size: 0;
            img{
                position: absolute;
                left: -400px;
                right: 0;
                top: 225px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .four-d{
            font-size: 0;
            img{
                position: absolute;
                left: -400px;
                right: 0;
                top: 190px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
            }
        }
        .four-e{
            font-size: 0;
            img{
                position: absolute;
                left: -400px;
                right: 0;
                top: 401px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .four-f{
            font-size: 0;
            img{
                position: absolute;
                left: -400px;
                right: 0;
                top: 398px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .four-g{
            font-size: 0;
            img{
                position: absolute;
                left: -400px;
                right: 0;
                top: 214px;
                margin: 0 auto;
                z-index: 103;
                transform: rotate(-20deg);
                opacity: 0;
            }
        }
        .four-h{
            font-size: 0;
            img{
                position: absolute;
                left: -400px;
                right: 0;
                top: 155px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .four-i{
            font-size: 0;
            img{
                position: absolute;
                left: 95px;
                right: 0;
                top: 155px;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
                transform: scale(1);
            }
        }
        .four-j{
            width: 286px;
            height: 30px;
            line-height: 30px;
            font-size:12px;
            color: white;
            background: #0E1845;
//          text-align: center;
            text-indent: 24px;
            position: absolute;
            z-index: 105;
            opacity: 0;
            left: -400px;
            right: 0;
            top: 450px;
            margin: 0 auto;
        }
        .four-k{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 485px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
        }
    }
    .four-page.active{
        .four-a{
            img{
                animation: four-a 0.6s 1 linear 0.3s forwards;   
            }
        }
        .four-b{
            img{
                animation: four-b 0.8s 1 linear forwards 1.6s;   
            }
        }
        .four-c{
            img{
                animation: four-c 0.8s 1 linear forwards 0.8s;    
            }
        }
        .four-d{
            img{
                animation: four-d 0.8s 1 linear forwards 0.8s;    
            }
        }
        .four-e{
            img{
                animation: four-e 0.8s 1 linear forwards 0.8s;    
            }
        }
        .four-f{
            img{
                animation: four-f 0.8s 1 forwards linear 0.8s;    
            }
        }
        .four-g{
            img{
                animation: four-g 0.8s 1 forwards linear 0.8s;    
            }
        }
        .four-h{
            img{
                animation: four-h 0.8s 1 forwards linear 0.8s;
            }
        }
        .four-i{
            img{
                animation: four-i 2.8s infinite forwards linear 1.6s; 
            }
        }
        .four-j{
            animation: four-j 0.3s 1 linear 2.8s forwards;    
        }
        .four-k{
            img{
                animation: four-k 1s infinite linear 0.4s; 
            }   
        }
    }
    //第四页结束
    
    //第五页开始
    .five-page{
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        .five-a{
            font-size: 0;
            img{
                position: absolute;
                left: -10px;
                right: 0;
                top: 170px;
                margin: 0 auto;
                z-index: 100;
            }
        }
        .five-b{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: -300px;
                margin: 0 auto;
                z-index: 102;
            }
        }
        .five-c{
            font-size: 0;
            img{
                position: absolute;
                left:231px;
                right: 0;
                top: 372px;
                margin: 0 auto;
                z-index: 101;
            }
        }
        .five-d{
            font-size: 0;
            img{
                position: absolute;
                left:400px;
                right: 0;
                top: 150px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .five-e{
            font-size: 0;
            img{
                position: absolute;
                left:400px;
                right: 0;
                top: 153px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .five-f{
            font-size: 0;
            img{
                position: absolute;
                left:400px;
                right: 0;
                top: 96px;
                margin: 0 auto;
                z-index: 104;
                opacity: 0;
            }
        }
        .five-g{
            font-size: 0;
            img{
                position: absolute;
                left:-265px;
                right: 0;
                top: 96px;
                margin: 0 auto;
                z-index: 104;
                opacity: 0;
            }
        }
        .five-h{
            font-size: 0;
            img{
                position: absolute;
                left:-75px;
                right: 0;
                top: 235px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .five-i{
            font-size: 0;
            img{
                position: absolute;
                left:-314px;
                right: 0;
                top: 178px;
                margin: 0 auto;
                z-index: 104;
                opacity: 0;
            }
        }
        .five-j{
            font-size: 0;
            img{
                position: absolute;
                left:400px;
                right: 0;
                top: 240px;
                margin: 0 auto;
                z-index: 104;
                transform: rotate(50deg);
            }
        }
        .five-k{
            width: 84%;
            height: 30px;
            line-height: 30px;
            font-size:12px;
            color: white;
            background: #0E1845;
            text-align: center;
            position: absolute;
            z-index: 105;
            opacity: 0;
            left: -80%;
            right: 0;
            top: 430px;
        }
        .five-l{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 485px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
        }
    }
    .five-page.active{
        .five-a{
            img{
                
            }
        }
        .five-b{
            img{
                animation: five-b 0.5s 1 forwards 1s;
            }
        }
        .five-c{
            img{
                
            }
        }
        .five-d{
            img{
                animation: five-d 0.7s 1 forwards 0.2s;   
            }
        }
        .five-e{
            img{
                animation: five-e 0.7s 1 forwards 0.2s;    
            }
        }
        .five-f{
            img{
                animation: five-f 0.7s 1 forwards 0.2s;    
            }
        }
        .five-g{
            img{
                animation: five-g 0.1s infinite forwards 2s;   
            }
        }
        .five-h{
            img{
                animation: five-h 1.5s 1 forwards 0.8s;    
            }
        }
        .five-i{
            img{
                animation: five-i 1.5s 1 forwards 2.0s;    
            }
        }
        .five-j{
            img{
                animation: five-j 0.7s 1 forwards 0.2s;   
            }
        }
        .five-k{
            animation: five-k 0.3s 1 linear 2.5s forwards;   
        }
        .five-l{
            img{
                animation: five-l 1s infinite linear 0.4s; 
            }    
        }
    }
    //第五页结束
    
    //第六页开始
    .six-page{
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        .six-a{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: -400px;
                margin: 0 auto;
                z-index: 100;
            }
        }
        .six-b{
            font-size: 0;
            img{
                position: absolute;
                left: 25px;
                right: 0;
                top: 105px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .six-c{
            font-size: 0;
            img{
                position: absolute;
                left: 0px;
                right: 0;
                top: 370px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
            }
        }
        .six-d{
            font-size: 0;
            img{
                position: absolute;
                left: 0px;
                right: 0;
                top: 435px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
            }
        }
        .six-e{
            font-size: 0;
            img{
                position: absolute;
                left: 0px;
                right: 0;
                top: 435px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .six-f{
            font-size: 0;
            img{
                position: absolute;
                left: 35px;
                right: 0;
                top: 415px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
            }
        }
        .six-g{
            font-size: 0;
            img{
                position: absolute;
                left: 35px;
                right: 0;
                top: 415px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
            }
        }
        .six-h{
            font-size: 0;
            img{
                position: absolute;
                left: -140px;
                right: 0;
                top: 360px;
                margin: 0 auto;
                z-index: 103;
                transform: rotate(-27deg) scale(0);
            }
        }
        .six-i{
            font-size: 0;
            img{
                position: absolute;
                left: 130px;
                right: 0;
                top:70px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .six-j{
            font-size: 0;
            img{
                position: absolute;
                left: 130px;
                right: 0;
                top:70px;
                margin: 0 auto;
                z-index: 104;
                opacity: 0;
            }
        }
        .six-k{
            font-size: 0;
            text-align: center;
            line-height: 82px;
            
            img{
                position: absolute;
                left: 230px;
                right: 0;
                top:10px;
                margin: 0 auto;
                z-index: 103;
                transform: scale(0);
            }
            span{
                font-size: 20px;
                position: absolute;
                left: 235px;
                right: 0;
                top:8px;
                margin: 0 auto;
                z-index: 104;
                transform: scale(0);
            }
        }
        .six-l{
            width: 70%;
            height: 30px;
            line-height: 30px;
            font-size:12px;
            color: white;
            background: #0E1845;
            text-align: center;
            position: absolute;
            z-index: 105;
            opacity: 0;
            left: -80%;
            right: 0;
            top: 30px;
        }
        .six-n{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 520px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
        }
    }
    .six-page.active{
        .six-a{
            img{
                animation: six-a 0.7s 1 linear 0.2s forwards;
            }
        }
        .six-b{
            img{
                animation: six-b 0.6s forwards 1 3.5s;
            }
        }
        .six-c{
            img{
                animation: six-c 2s 1 forwards linear 1.5s;
            }
        }
        .six-d{
            img{
                animation: six-d 1s linear 1 forwards 2s;   
            }
        }
        .six-e{
            img{
                animation: six-e 0.1s linear infinite 4s;
            }
        }
        .six-f{
            img{
                animation: six-f 0.5s 1 forwards 0.8s linear;
            }
        }
        .six-g{
            img{
                animation: six-g 0.1s infinite 4s linear;
            }
        }
        .six-h{
            img{
                animation: six-h 0.5s linear 1 forwards 4s;
            }
        }
        .six-i{
            img{
                animation: six-i 3s linear 1 forwards 4.2s;
            }
        }
        .six-j{
            img{
                animation: six-j 3s linear 1 forwards 4.2s;
            }
        }
        .six-k{
            img{
                animation: six-k 0.7s linear 1 forwards 7s;
            }
            span{
                animation: six-k 0.7s linear 1 forwards 7s;
            }
        }
        .six-l{
            animation: six-l 0.3s 1 linear 7.5s forwards;
        }
        .six-n{
             img{
                animation: six-n 1s infinite linear 0.4s; 
            } 
        }
    }
    //第六页结束
    
    //第七页开始
    .seven-page{
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: url(../img/seven/seven-d.png);
        position: relative;
        .seven-a{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
            }
        }
        .seven-b{
            width: 100%;
            height: 26px;
            line-height: 26px;
            background: black;
            color: white;
            font-size: 16px;
            text-indent: 16px;
            position: absolute;
            left: -80%;
            right: 0;
            top: 200px;
            margin: 0 auto;
            z-index: 101;
            opacity: 0;
        }
        .seven-c{
            font-size: 0;
            img{
                position: absolute;
                left: 300px;
                right: 0;
                top: 110px;
                margin: 0 auto;
                transform: rotate(-10deg);
                z-index: 102;
                opacity: 0;
            }
        }
        .seven-d{
            font-size: 0;
            img{
                position: absolute;
                left: 0px;
                right: 0;
                top: 370px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
                transform: scale(0);
            }
        }
        .seven-e{
            font-size: 0;
            img{
                position: absolute;
                left: 0px;
                right: 0;
                top: 370px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
                transform: rotate(30deg);
            }
            a{
                display: block;
                width: 160px;
                height: 80px;
                position: absolute;
                left: -20px;
                right: 0;
                top: 380px;
                margin: 0 auto;
                background: red;
                z-index: 105;
            }
        }
        .seven-f{
            font-size: 0;
            img{
                position: absolute;
                left: 450px;
                right: 0;
                top: 390px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .seven-g{
            font-size: 0;
            img{
                position: absolute;
                left: 230px;
                right: 0;
                top: 390px;
                margin: 0 auto;
                z-index: 104;
                opacity: 0;
            }
        }
        .seven-h{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 485px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
        }
    }
    .seven-big-box.active{
        .seven-page{
            .seven-a{
                img{
                    animation: seven-a 2s forwards 1 linear 1s;    
                }
            }
            .seven-b{
                animation: seven-b 0.7s 1 linear forwards 0.2s;
            }
            .seven-c{
                img{
                    animation: seven-c 0.7s linear 1 0.2s forwards;    
                }
            }
            .seven-d{
                img{
                    animation: seven-d 0.5s linear 1 forwards 1.8s;    
                }
            }
            .seven-e{
                img{
                    animation: seven-e 1.2s linear infinite 2.2s;    
                }
            }
            .seven-f{
                img{
                    animation: seven-f 0.7s linear 1 forwards 2.3s;   
                }
            }
            .seven-g{
                img{
                    animation: seven-g 0.1s linear infinite 3s;    
                }
            }
            .seven-h{
                img{
                animation: seven-h 1s infinite linear 0.4s; 
            } 
            }
        }
    }
    //第七页结束
    
    //第八页开始
    .eight-page{
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        .eight-a{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: 30px;
                margin: 0 auto;
                z-index: 100;
                transform: scale(0);
            }
        }
        .eight-b{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top: 600px;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
                transform: scale(1) rotate(0deg);
            }
        }
        .eight-c{
            font-size: 0;
            img{
                position: absolute;
                left: 250px;
                right: 0;
                top: 365px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .eight-d{
            font-size: 0;
            img{
                position: absolute;
                left: -100px;
                right: 0;
                top: 379px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .eight-e{
            font-size: 14px;
            text-align: center;
            color: white;
            width: 80%;
            height: 21px;
            line-height: 21px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            background: black;
        }
        .eight-f{
            font-size: 0px;
            img{
                width: 30px;
                height: 30px;
                color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 485px;
                margin: 0 auto;
                text-align: center;
                z-index: 105;
                opacity: 1;
            }
        }
    }
    .eight-page.active{
        .eight-a{
            img{
                animation: eight-a 1s linear 1 forwards 0.2s; 
            }
        }
        .eight-b{
            img{
                animation: eight-b 1.5s linear 1 forwards 1.5s;    
            }
        }
        .eight-c{
            img{
                animation: eight-c 0.7s linear 1 forwards 1s;    
            }
        }
        .eight-d{
            img{
                animation: eight-d 0.7s linear 1 forwards 1s;    
            }
        }
        .eight-e{
            
        }
        .eight-f{
             img{
                animation: eight-f 1s infinite linear 0.4s; 
            }   
        }
    }
    //第八页结束
    
    //第九页开始
    .nine-page{
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        //第一个开始
        .nine-a{
            font-size: 0;
            img{
                position: absolute;
                left: 500px;
                right: 0;
                top: 32px;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
            }
        }
        .nine-b{
            font-size: 0;
            img{
                position: absolute;
                left: -140px;
                right: 0;
                top: 20px;
                margin: 0 auto;
                z-index: 101;
                transform: scale(0);
            }
        }
        .nine-c{
//          input{
//                  display: block;
//              }
//          label{
//              display: block;
                width: 127px;
                height: 26px;
                font-size: 16px;
                line-height: 26px;
                color: white;
                background: #E87474;
                position: absolute;
                left: -140px;
                right: 0;
                top: -200px;
                margin: 0 auto;
                border: 2px solid black;
                text-align: center;
                z-index: 101;
                opacity: 0;
//              .one-span{
//                  display: block;
//              }
//              .two-span{
//                  display: none;
//              }
                i{
                    margin-right:10px;
                }
//          }
            
        }
        //第一个结束
        
        //第二个开始
        .nine-d{
            font-size: 0;
            img{
                position: absolute;
                left: 500px;
                right: 0;
                top: 32px;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
            }
        }
        .nine-e{
            font-size: 0;
            img{
                position: absolute;
                left: 150px;
                right: 0;
                top: 20px;
                margin: 0 auto;
                z-index: 101;
                transform: scale(0);
            }
        }
        .nine-f{
            width: 127px;
            height: 26px;
            font-size: 16px;
            line-height: 26px;
            color: white;
            background: #E87474;
            position: absolute;
            left: 150px;
            right: 0;
            top: -200px;
            margin: 0 auto;
            border: 2px solid black;
            text-align: center;
            z-index: 101;
            opacity: 0;
            i{
                margin-right:10px;
            }
        }
        //第二个结束
        //第三个
        .nine-g{
            font-size: 0;
            img{
                position: absolute;
                left: 500px;
                right: 0;
                top: 180px;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
            }
        }
        .nine-h{
            font-size: 0;
            img{
                position: absolute;
                left: -140px;
                right: 0;
                top: 170px;
                margin: 0 auto;
                z-index: 101;
                transform: scale(0);
            }
        }
        .nine-i{
            width: 127px;
            height: 26px;
            font-size: 16px;
            line-height: 26px;
            color: white;
            background: #E87474;
            position: absolute;
            left: -140px;
            right: 0;
            top: -200px;
            margin: 0 auto;
            border: 2px solid black;
            text-align: center;
            z-index: 101;
            opacity: 0;
            i{
                margin-right:10px;
            }
        }
        //第三个结束
        //第四个
        .nine-j{
            font-size: 0;
            img{
                position: absolute;
                left: 500px;
                right: 0;
                top: 180px;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
            }
        }
        .nine-k{
            font-size: 0;
            img{
                position: absolute;
                left: 150px;
                right: 0;
                top: 170px;
                margin: 0 auto;
                z-index: 101;
                transform: scale(0);
            }
        }
        .nine-l{
            width: 127px;
            height: 26px;
            font-size: 16px;
            line-height: 26px;
            color: white;
            background: #E87474;
            position: absolute;
            left: 150px;
            right: 0;
            top: -200px;
            margin: 0 auto;
            border: 2px solid black;
            text-align: center;
            z-index: 101;
            opacity: 0;
            i{
                margin-right:10px;
            }
        }
        //第四个结束
        //第五个
        .nine-n{
            font-size: 0;
            img{
                position: absolute;
                left: 500px;
                right: 0;
                top: 330px;
                margin: 0 auto;
                z-index: 100;
                opacity: 0;
            }
        }
        .nine-m{
            font-size: 0;
            img{
                position: absolute;
                left: -140px;
                right: 0;
                top: 320px;
                margin: 0 auto;
                z-index: 101;
                transform: scale(0);
            }
        }
        .nine-o{
            width: 127px;
            height: 26px;
            font-size: 16px;
            line-height: 26px;
            color: white;
            background: #E87474;
            position: absolute;
            left: -140px;
            right: 0;
            top: -200px;
            margin: 0 auto;
            border: 2px solid black;
            text-align: center;
            z-index: 101;
            opacity: 0;
            i{
                margin-right:10px;
            }
        }
        //第五个结束
        .nine-p{
            font-size: 0;
            img{
                position: absolute;
                left: 145px;
                right: 0;
                top: 500px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .nine-q{
            font-size: 0;
            img{
                position: absolute;
                left: 400px;
                right: 0;
                top: 340px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .nine-r{
            font-size: 0;
            img{
                position: absolute;
                left: 190px;
                right: 0;
                top: 340px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
            }
        }
        .nine-s{
            font-size: 0;
            img{
                position: absolute;
                left: 50px;
                right: 0;
                top: 310px;
                margin: 0 auto;
                z-index: 103;
                transform: rotate(-100deg) scale(0);
            }
            span{
                font-size: 12px;
                display: block;
                width: 100px;
                height: 30px;
                position: absolute;
                left: 85px;
                right: 0;
                top: 345px;
                margin: 0 auto;
                z-index: 104;
                transform: scale(0);
            }
        }
    }
    .nine-page.active{
        .nine-a{
            img{
               animation: nine-a 0.7s linear 1 forwards 0.2s; 
            }
        }
        .nine-b{
            img{
                animation: nine-b 0.6s linear 1 forwards 1s;   
            }
        }
        .nine-c{
                animation: nine-c 0.5s linear 1 forwards 0.6s;
        }
        .nine-d{
            img{
                animation: nine-d 0.7s linear 1 forwards 0.4s;    
            }
        }
        .nine-e{
            img{
                animation: nine-e 0.6s linear 1 forwards 1.2s;    
            }
        }
        .nine-f{
            animation: nine-f 0.5s linear 1 forwards 0.8s;
        }
        .nine-g{
            img{
                animation: nine-g 0.7s linear 1 forwards 0.6s;    
            }
        }
        .nine-h{
            img{
                animation: nine-h 0.6s linear 1 forwards 1.4s;    
            }
        }
        .nine-i{
            animation: nine-i 0.5s linear 1 forwards 1s;  
        }
        .nine-j{
            img{
                animation: nine-j 0.7s linear 1 forwards 0.8s;    
            }
        }
        .nine-k{
            img{
                animation: nine-k 0.6s linear 1 forwards 1.6s;    
            }
        }
        .nine-l{
                animation: nine-l 0.5s linear 1 forwards 1.2s; 
        }
        .nine-n{
            img{
                animation: nine-n 0.7s linear 1 forwards 1s;   
            }
        }
        .nine-m{
            img{
                animation: nine-m 0.6s linear 1 forwards 1.8s;    
            }
        }
        .nine-o{
                animation: nine-o 0.5s linear 1 forwards 1.4s;
        }
        .nine-p{
            img{
                animation: nine-p 0.6s linear 1 forwards 2s;    
            }
        }
        .nine-q{
            img{
                animation: nine-q 0.6s linear 1 forwards 2.3s;    
            }
        }
        .nine-r{
            img{
                animation: nine-r 0.1s linear infinite forwards 3.3s;    
            }
        }
        .nine-s{
            img{
                animation: nine-s 0.5s linear 1 forwards 3.4s;    
            }
            span{
                animation: nine-span 0.5s linear 1 forwards 3.8s;    
            }
        }
    }
    //第九页结束
    
    //第十页开始
    .ten-page{
        width: 100%;
        height: 100%;
        background: url(../img/frist/first-beijin.png);
        position: relative;
        overflow: hidden;
        .ten-a{
            font-size: 0;
            img{
                position: absolute;
                left: 0;
                right: 0;
                top:280px;
                margin: 0 auto;
                z-index: 100;
                transform: scale(0);
            }
        }
        .ten-b{
            font-size: 0;
            img{
                position: absolute;
                left: 20px;
                right: 0;
                top:-200px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .ten-c{
            font-size: 0;
            img{
                position: absolute;
                left: 0px;
                right: -18px;
                top:-73px;
                margin: 0 auto;
                transform: rotate(-3deg);
                z-index: 102;
                opacity: 0;
            }
        }
        .ten-d{
            font-size: 0;
            img{
                position: absolute;
                left: -400px;
                right: 0;
                top:318px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
            }
        }
        .ten-e{
            font-size: 0;
            img{
                position: absolute;
                left: 120px;
                right: 0;
                top:200px;
                margin: 0 auto;
                z-index: 102;
                transform: scale(0);
            }
            p{
                font-size: 12px;
                line-height: 20px;
                position: absolute;
                left: 130px;
                right: 0;
                top:210px;
                margin: 0 auto;
                z-index: 103;
                width: 120px;
                transform: scale(0);
            }
        }
        .ten-f{
            font-size: 0;
            img{
                position: absolute;
                left: -500px;
                right: 0;
                top:312px;
                margin: 0 auto;
                z-index: 101;
                opacity: 0;
                transform-origin: bottom;
            }
        }
        .ten-g{
            font-size: 0;
            img{
                position: absolute;
                left: -150px;
                right: 0;
                top:180px;
                margin: 0 auto;
                z-index: 103;
                transform: scale(0);
            }
            p{
                font-size: 12px;
                line-height: 20px;
                position: absolute;
                left: -150px;
                right: 0;
                top:195px;
                margin: 0 auto;
                z-index: 104;
                width: 120px;
                transform: scale(0);
            }
        }
        .ten-h{
            font-size: 0;
            img{
                position: absolute;
                left: -240px;
                right: 0;
                top:-200px;
                margin: 0 auto;
                transform: rotate(-20deg);
                z-index: 106;
            }
        }
        .ten-i{
            font-size: 0;
            img{
                position: absolute;
                left: -150px;
                right: 0;
                top:312px;
                margin: 0 auto;
                z-index: 102;
                opacity: 0;
                transform: rotate(0deg);
                transform-origin: bottom;
            }
        }
        .ten-j{
            font-size: 0;
            img{
                position: absolute;
                left: 160px;
                right: 0;
                top:318px;
                margin: 0 auto;
                z-index: 103;
                opacity: 0;
                transform: rotate(0deg);
                transform-origin: bottom;
            }
        }
    }
    .ten-page.active{
            .ten-a{
                img{
                    animation: ten-a 0.6s linear 1 forwards 0.2s;   
                }
            }
            .ten-b{
                img{
                    animation: ten-b 0.6s linear 1 forwards 4.2s;   
                }
            }
            .ten-c{
                img{
                    animation: ten-c 0.6s linear 1 forwards 4.7s;   
                }
            }
            .ten-d{
                img{
                    animation: ten-d 1.4s linear 1 forwards 0.6s;    
                }
            }
            .ten-e{
                img{
                    animation: ten-e 0.5s linear 1 forwards 3.8s;
                }
                p{
                    animation: ten-p-1 0.5s linear 1 forwards 3.9s;
                } 
            }
            .ten-f{
                img{
                    animation: ten-f 0.8s linear 1 forwards 0.6s;   
                }
            }
            .ten-g{
                img{
                    animation: ten-g 0.5s linear 1 forwards 2s;    
                }
                p{
                    animation: ten-p-2 0.5s linear 1 forwards 2.1s; 
                }
            }
            .ten-h{
                img{
                    animation: ten-h 0.5s linear 1 forwards 4.7s;
                }
            }
            .ten-i{
                img{
                    animation: ten-i 1s linear 1 forwards 1s;    
                }
            }
            .ten-j{
                img{
                    animation: ten-j 2s linear 1 forwards 1.8s;   
                }
            }   
        }
//      .one-one{
//          width: 100%;
//          height: 100%;
//          background: url(../img/frist/first-beijin.png);
//      }
//      .one-one-one{
//          width: 100%;
//          height: 100%;
//          background: url(../img/frist/first-beijin.png);
//      }
    //第十页结束
}
//第一页动画设置开始
@keyframes first-a{
    0%{
        left:5px;
        top:150px;
    }
    25%{
        
        left: 2px;
        top:149px;
    }
    50%{
        left: 5px;
        top:150px;
    }
    75%{
        left: 2px;
        top:149px;
    }
    100%{
        left:5px;
        top:150px;
    }
}
@keyframes first-b{
    0%{
        transform: scale(2);
        opacity: 0;
    }
    25%{
        transform: scale(1.8);
        opacity: 0.2;
    }
    50%{
        transform: scale(1.5);
        opacity: 0.4;
    }
    75%{
        transform: scale(1.3);
        opacity: 0.6;
    }
    100%{
        transform:scale(1);
        opacity: 1;
    }
}
@keyframes first-c{
    0%{
        top:-200px;
    }
    25%{
        top:-50px;
    }
    50%{
        top:110px;
    }
    75%{
        top:120px;
    }
    100%{
        top:112px;
    }
}
@keyframes first-d{
    0%{
        transform: rotate(0deg)
        scale(1.02);
    }
    25%{
        transform: rotate(5deg) scale(1.02);
    }
    50%{
        transform: rotate(0deg) scale(1.02);
    }
    75%{
        transform: rotate(-5deg) scale(1.02);
    }
    100%{
        transform: rotate(0deg) scale(1.02); 
    }
}


@keyframes first-e{
    0%{
        left: -150%;
        opacity: 1;
    }
    50%{
        left: -100%;
        opacity: 0.8;
    }
    50%{
        left: -50%;
        opacity: 0.8;
    }
    75%{
        left: 5px;
        opacity: 0.8;
    }
    100%{
        left: 5px; 
        opacity: 0;
    }
}
@keyframes first-f{
    0%{
        right: -150%;
        opacity: 1;
    }
    50%{
        right: -100%;
        opacity: 0.8;
    }
    50%{
        right: -50%;
        opacity: 0.8;
    }
    75%{
        right: -5px;
        opacity: 0.8;
    }
    100%{
        right: -5px; 
        opacity: 0;
    }
}


@keyframes first-g{
    0%{
        left: -150%;
        opacity: 1;
    }
    50%{
        left: -100%;
        opacity: 0.8;
    }
    50%{
        left: -50%;
        opacity: 0.8;
    }
    75%{
        left: 5px;
        opacity: 0.8;
    }
    100%{
        left: 5px; 
        opacity: 0;
    }
}
@keyframes first-h{
    0%{
        right: -150%;
        opacity: 1;
    }
    50%{
        right: -100%;
        opacity: 0.8;
    }
    50%{
        right: -50%;
        opacity: 0.8;
    }
    75%{
        right: -5px;
        opacity: 0.8;
    }
    100%{
        right: -5px; 
        opacity: 0;
    }
}

@keyframes first-i{
    0%{
        transform:scale(1);
        opacity: 0.8;
    }
    25%{
        transform:scale(1.4);
        opacity: 0.6;
    }
    50%{
        transform:scale(1.8);
        opacity: 0.4;
    }
    75%{
        transform:scale(2);
        opacity: 0.2;
    }
    100%{
        transform:scale(2.4);
        opacity: 0; 
    }
}
@keyframes first-j{
    0%{
        transform:scale(1);
        opacity: 0.8;
    }
    25%{
        transform:scale(1.4);
        opacity: 0.6;
    }
    50%{
        transform:scale(1.8);
        opacity: 0.4;
    }
    75%{
        transform:scale(2);
        opacity: 0.2;
    }
    100%{
        transform:scale(2.4);
        opacity: 0; 
    }
}
@keyframes first-k{
   from{
       transform: scale(3.5) rotate(0deg);
       opacity: 0;
   }
   to{
       transform: scale(1) rotate(720deg);
       opacity: 1;
   }
}
@keyframes first-l{
   from{
       transform: scale(3.5) rotate(0deg);
       opacity: 0;
   }
   to{
       transform: scale(1) rotate(720deg);
       opacity: 1;
   }
}
@keyframes first-n{
   from{
       transform: scale(3.5) rotate(0deg);
       opacity: 0;
   }
   to{
       transform: scale(1) rotate(720deg);
       opacity: 1;
   }
}
@keyframes first-m{
   from{
       transform: scale(3.5) rotate(0deg);
       opacity: 0;
   }
   to{
       transform: scale(1) rotate(720deg);
       opacity: 1;
   }
}
@keyframes first-o{
   from{
       transform: scale(0) rotate(0deg);
       opacity: 0;
   }
   to{
       transform: scale(1) rotate(1080deg);
       opacity: 1;
   }
}

@keyframes first-p{
    0%{
        top:300px;
        opacity: 0;
    }
    50%{
        top:375px;
        opacity: 0.8;
    }
    50%{
        top:435px;
        opacity: 0.6;
    }
    75%{
        top:445px;
        opacity: 0.4;
    }
    100%{
        top:435px;
        opacity: 1;
    }
}
@keyframes first-q{
   from{
       transform: scale(0);
       opacity: 0;
   }
   to{
       transform: scale(1);
       opacity: 1;
   }
}
@keyframes first-r{
   from{
       top: 505px;
       opacity:1;
   }
   to{
       top:485px;
       opacity: 0;
   }
}
//第一页动画设置结束

//第二页动画设置开始
@keyframes two-a{
   0%{
       top: -600px;
   }
   50%{
       top: 80px; 
   }
   75%{
       top: 100px;
   }
   100%{
       top: 80px;
   }
}
@keyframes two-b{
   0%{
       top: -200px;
   }
   50%{
       top: 50px; 
   }
   75%{
       top: 40px;
   }
   100%{
       top: 50px;
   }
}
@keyframes two-c{
   0%{
       left: 80px;
       opacity: 0;
   }
   50%{
       left: 34px; 
       opacity: 1;
   }
   75%{
       left: 54px;
       opacity: 1;
   }
   100%{
       left:34px;
       opacity: 1;
   }
}
@keyframes two-d{
   0%{
       left: 200px;
       opacity: 0;
   }
   50%{
       left: 170px; 
       opacity: 1;
   }
   75%{
       left: 180px;
       opacity: 1;
   }
   100%{
       left:170px;
       opacity: 1;
   }
}
@keyframes two-e{
   0%{
       right: -80px;
       opacity: 0;
   }
   50%{
       right: 130px; 
       opacity: 1;
   }
   75%{
       right: 115px;
       opacity: 1;
   }
   100%{
       right: 130px;
       opacity: 1;
   }
}
@keyframes two-f{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1);
   }
   75%{
       transform: scale(0.8);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes two-g{
   0%{
       right: -90px;
       opacity: 0;
   }
   50%{
       right: 180px;
       opacity: 1; 
   }
   75%{
       right: 160px;
       opacity: 1;
   }
   100%{
       right: 180px;
       opacity: 1;
   }
}
@keyframes two-h{
   0%{
       left: -400px;
       opacity: 1;
   }
   50%{
       left: -90px;
       opacity: 1; 
   }
   75%{
       left: -140px;
       opacity: 1;
   }
   100%{
       left: -117px;
       opacity: 1;
   }
}

@keyframes two-i{
   from{
       top: 505px;
       opacity:1;
   }
   to{
       top:485px;
       opacity: 0;
   }
}
//第二页动画设置结束

//第三页动画设置开始
@keyframes three-a{
   0%{
       top: -500px;
   }
   50%{
       top: 160px; 
   }
   75%{
       top: 180px;
   }
   100%{
       top: 160px;
   }
}
@keyframes three-b{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 20px;
       opacity: 1; 
   }
   75%{
       top: -10px;
       opacity: 1;
   }
   100%{
       top: 20px;
       opacity: 1;
   }
}
@keyframes three-c{
   0%{
       left: 200px;
       opacity: 0;
   }
   50%{
       left: 50px;
       opacity: 1; 
   }
   75%{
       left: 80px;
       opacity: 1;
   }
   100%{
       left: 50px;
       opacity: 1;
   }
}
@keyframes three-d{
   0%{
       left: -350px;
       opacity: 0;
   }
   50%{
       left:-220px;
       opacity: 1; 
   }
   75%{
       left:-250px;
       opacity: 1;
   }
   100%{
       left:-220px;
       opacity: 1;
   }
}
@keyframes three-e{
   0%{
       left: -100px;
       opacity: 0;
   }
   50%{
       left:7px;
       opacity: 1; 
   }
   75%{
       left:-20px;
       opacity: 1;
   }
   100%{
       left:7px;
       opacity: 1;
   }
}
@keyframes three-f{
   0%{
       transform: scale(0);
       opacity: 0;
   }
   50%{
       transform: scale(1);
       opacity: 1; 
   }
   75%{
       transform: scale(0.8);
       opacity: 1;
   }
   100%{
       transform: scale(1);
       opacity: 1;
   }
}
@keyframes three-g{
   from{
       transform: scale(0);
       opacity: 0;
   }
   to{
       transform: scale(1);
       opacity: 1; 
   }
}
@keyframes three-h{
   0%{
       transform: rotate(10deg) scale(0);
       opacity: 0;
   }
   50%{
       transform: rotate(10deg) scale(1);
       opacity: 1;
   }
   75%{
       transform: rotate(10deg) scale(0.8);
       opacity: 1;
   }
   100%{
       transform: rotate(10deg) scale(1);
       opacity: 1;
   }
}
@keyframes three-i{
    from{
       transform: rotate(10deg) scale(1);
       opacity: 0;
   }
   to{
       transform: rotate(10deg) scale(0.98);
       opacity: 1;
   }
}
@keyframes three-j{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left: -117px;
       opacity: 1; 
   }
   75%{
       left: -157px;
       opacity: 1;
   }
   100%{
       left: -137px;
       opacity: 1;
   }
}

@keyframes three-k{
   from{
       top: 505px;
       opacity:1;
   }
   to{
       top:485px;
       opacity: 0;
   }
}
//第三页动画设置结束

//第四页动画设置开始
@keyframes four-a{
   0%{
       top: -200px;
   }
   50%{
       top: 260px; 
   }
   75%{
       top: 220px;
   }
   100%{
       top: 240px;
   }
}
@keyframes four-b{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 40px;
       opacity: 1; 
   }
   75%{
       top: 10px;
       opacity: 1;
   }
   100%{
       top: 40px;
       opacity: 1;
   }
}
@keyframes four-c{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left: -180px;
       opacity: 1; 
   }
   75%{
       left: -200px;
       opacity: 1;
   }
   100%{
       left: -180px;
       opacity: 1;
   }
}
@keyframes four-d{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left: 0px;
       opacity: 1; 
   }
   75%{
       left: -20px;
       opacity: 1;
   }
   100%{
       left: 0px;
       opacity: 1;
   }
}
@keyframes four-e{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left: -190px;
       opacity: 1; 
   }
   75%{
       left: -210px;
       opacity: 1;
   }
   100%{
       left: -190px;
       opacity: 1;
   }
}
@keyframes four-f{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left: 130px;
       opacity: 1; 
   }
   75%{
       left: 110px;
       opacity: 1;
   }
   100%{
       left: 130px;
       opacity: 1;
   }
}
@keyframes four-g{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left:-140px;
       opacity: 1; 
   }
   75%{
       left: -160px;
       opacity: 1;
   }
   100%{
       left: -140px;
       opacity: 1;
   }
}
@keyframes four-h{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left:95px;
       opacity: 1; 
   }
   75%{
       left: 75px;
       opacity: 1;
   }
   100%{
       left: 95px;
       opacity: 0;
   }
}
@keyframes four-i{
   from{
       transform: scale(1);
       opacity: 1;
   }
   to{
       transform: scale(2);
       opacity: 0; 
   }
}
@keyframes four-j{
   0%{
       left: -400px;
       opacity: 0;
   }
   50%{
       left: -123px;
       opacity: 1; 
   }
   75%{
       left: -83px;
       opacity: 1;
   }
   100%{
       left: -103px;
       opacity: 1;
   }
}

@keyframes four-k{
   from{
       top: 505px;
       opacity:1;
   }
   to{
       top:485px;
       opacity: 0;
   }
}
//第四页动画设置结束

//第五页动画设置开始
@keyframes five-b{
   0%{
       top: -400px;
       opacity: 0;
   }
   50%{
       top: 40px;
       opacity: 1; 
   }
   75%{
       top: 10px;
       opacity: 1; 
   }
   100%{
       top: 40px;
       opacity: 1;
   }
}
@keyframes five-d{
   0%{
       left: 400px;
       opacity: 0;
   }
   50%{
       left: -30px;
       opacity: 1; 
   }
   75%{
       left: 0px;
       opacity: 1;
   }
   100%{
       left: -30px;
       opacity: 1;
   }
}
@keyframes five-e{
   0%{
       left: 400px;
       opacity: 0;
   }
   50%{
       left: 0px;
       opacity: 1; 
   }
   75%{
       left: 30px;
       opacity: 1;
   }
   100%{
       left: 0px;
       opacity: 1;
   }
}
@keyframes five-f{
   0%{
       left: 400px;
       opacity: 0;
   }
   50%{
       left: -262px;
       opacity: 1; 
   }
   75%{
       left: -232px;
       opacity: 1;
   }
   100%{
       left: -262px;
       opacity: 1;
   }
}
@keyframes five-g{
   from{
       left: -265;
       opacity: 0;
   }
   to{
       left: -262;
       opacity: 1;
   }
}

@keyframes five-h{
   from{
       opacity: 0;
   }
   to{
       opacity: 1; 
   }
}
@keyframes five-i{
   from{
       opacity: 0;
   }
   to{
       opacity: 1; 
   }
}
@keyframes five-j{
   0%{
       left: 400px;
       opacity: 0;
   }
   50%{
       left: 200px;
       opacity: 1; 
   }
   75%{
       left: 230px;
       opacity: 1;
   }
   100%{
       left: 200px;
       opacity: 1;
   }
}
@keyframes five-k{
   0%{
       left: -80%;
       opacity: 0;
   }
   50%{
       left: 0;
       opacity: 1; 
   }
   75%{
       left: -20px;
       opacity: 1;
   }
   100%{
       left: 0;
       opacity: 1;
   }
}
@keyframes five-l{
   from{
       top: 495px;
       opacity:1;
   }
   to{
       top:475px;
       opacity: 0;
   }
}
//第五页动画设置结束

//第六页动画设置开始
@keyframes six-a{
   0%{
       top: -400px;
   }
   50%{
       top: 140px; 
   }
   75%{
       top: 100px;
   }
   100%{
       top:120px;
   }
}
@keyframes six-b{
   0%{
       top: 250px;
       opacity: 0;
   }
   50%{
       top: 90px;
       opacity: 1; 
   }
   75%{
       top: 110px;
       opacity: 1;
   }
   100%{
       top:105px;
       opacity: 1;
   }
}
@keyframes six-c{
   from{
       opacity:0;
   }
   to{
       opacity:1;
   }
}
@keyframes six-d{
   from{
       opacity:0;
   }
   to{
       opacity:1;
   }
}
@keyframes six-e{
   from{
       top: 435px;
       opacity:0;
   }
   to{
       top: 434px;
       opacity:1;
   }
}

@keyframes six-f{
   0%{
       top: 550px;
       opacity: 0;
   }
   50%{
       top: 415px;
       opacity: 1;
   }
   75%{
       top: 430px;
       opacity: 1;
   }
   100%{
       top:415px;
       opacity: 1;
   }
}
@keyframes six-g{
   from{
       left: 35px;
       opacity:0;
   }
   to{
       left: 38px;
       opacity:1;
   }
}
@keyframes six-h{
   0%{
       transform: rotate(-27deg) scale(0);
   }
   50%{
       transform: rotate(-27deg) scale(1.2);
   }
   75%{
       transform: rotate(-27deg) scale(0.9);
   }
   100%{
       transform: rotate(-27deg) scale(1);
   }
}
@keyframes six-i{
   0%{
       top: 200px;
       opacity: 0;
   }
   10%{
       top: 50px;
       opacity: 1;
   }
   20%{
       top: 80px;
       opacity: 1;
   }
   30%{
       top:70px;
       opacity: 1;
   }
   40%{
       top:70px;
       opacity: 1;
   }
   50%{
       top:70px;
       opacity: 1;
   }
   60%{
       top:70px;
       opacity: 1;
   }
   70%{
       top:70px;
       opacity: 1;
   }
   80%{
       top:70px;
       opacity: 1;
   }
   90%{
       top:70px;
       opacity: 1;
   }
   100%{
       top:70px;
       opacity: 1;
   }
}
@keyframes six-j{
   0%{
       top: 200px;
       opacity: 0;
   }
   10%{
       top: 50px;
       opacity: 1;
   }
   20%{
       top: 80px;
       opacity: 1;
   }
   30%{
       top:70px;
       opacity: 1;
   }
   40%{
       top:70px;
       opacity: 0;
   }
   50%{
       top:70px;
       opacity: 1;
   }
   60%{
       top:70px;
       opacity: 0;
   }
   70%{
       top:70px;
       opacity: 1;
   }
   80%{
       top:70px;
       opacity: 0;
   }
   90%{
       top:70px;
       opacity: 1;
   }
   100%{
       top:70px;
       opacity: 0;
   }
}
@keyframes six-k{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes six-l{
   0%{
       left: -80%;
       opacity: 0;
   }
   50%{
       left: 0;
       opacity: 1; 
   }
   75%{
       left: -20px;
       opacity: 1;
   }
   100%{
       left: 0;
       opacity: 1;
   }
}
@keyframes six-n{
   from{
       top: 520px;
       opacity:1;
   }
   to{
       top:505px;
       opacity: 0;
   }
}
//第六页动画设置结束

//第七页动画设置开始
@keyframes seven-a{
   from{
       opacity:0;
   }
   to{
       opacity:1;
   }
}
@keyframes seven-b{
   0%{
       left: -80%;
       opacity: 0;
   }
   50%{
       left: 0;
       opacity: 1; 
   }
   75%{
       left: -20px;
       opacity: 1;
   }
   100%{
       left: 0;
       opacity: 1;
   }
}
@keyframes seven-c{
   0%{
       left: 300px;
       opacity: 0;
   }
   50%{
       left: 150px;
       opacity: 1; 
   }
   75%{
       left: 180px;
       opacity: 1;
   }
   100%{
       left: 170px;
       opacity: 1;
   }
}
@keyframes seven-d{
   0%{
       transform: scale(0);
       opacity: 0;
   }
   50%{
       transform: scale(1.2);
       opacity: 1;
   }
   75%{
       transform: scale(0.9);
       opacity: 1;
   }
   100%{
       transform: scale(1);
       opacity: 0;
   }
}
@keyframes seven-e{
   0%{
       transform:scale(0.9) rotate(0deg);
       opacity: 1;
   }
   10%{
       transform:scale(1.1) rotate(0deg);
       opacity: 1;
   }
   20%{
       transform:scale(1.1) rotate(10deg);
       opacity: 1;
   }
   30%{
       transform:scale(1.1) rotate(0deg);
       opacity: 1;
   }
   40%{
       transform:scale(1.1) rotate(-10deg);
       opacity: 1;
   }
   50%{
       transform:scale(1.1) rotate(0deg);
       opacity: 1;
   }
   60%{
       transform:scale(1.1) rotate(10deg);
       opacity: 1;
   }
   70%{
       transform:scale(1.1) rotate(0deg);
       opacity: 1;
   }
   80%{
       transform:scale(1.1) rotate(-10deg);
       opacity: 1;
   }
   90%{
       transform:scale(1.1) rotate(0deg);
       opacity: 1;
   }
   100%{
       transform:scale(0.9) rotate(0deg);
       opacity: 1;
   }
}
@keyframes seven-f{
   0%{
       left: 450px;
       opacity: 0;
   }
   50%{
       left: 210px;
       opacity: 1;
   }
   75%{
       left: 250px;
       opacity: 1;
   }
   100%{
       left: 230px;
       opacity: 1;
   }
}
@keyframes seven-g{
   from{
       left: 230px;
       opacity: 0;
   }
   to{
       left: 227px;
       opacity: 1;
   }
}
@keyframes seven-h{
   from{
       top: 475px;
       opacity:1;
   }
   to{
       top:455px;
       opacity: 0;
   }
}
//第七页动画设置结束

//第八页动画设置开始
@keyframes eight-a{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.1);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes eight-b{
   0%{
       top: 600px;
       opacity: 0;
       transform: scale(1) rotate(0deg);
   }
   5%{
       top: 420px;
       opacity: 1;
       transform: scale(1) rotate(0deg);
   }
   10%{
       top: 380px;
       opacity: 1;
       transform: scale(1) rotate(0deg);
   }
   15%{
       top: 400px;
       opacity: 1;
       transform: scale(1) rotate(0deg);
   }
   20%{
       top: 400px;
       opacity: 1;
       transform: scale(0.8) rotate(0deg);
   }
   25%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   30%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(10deg);
   }
   35%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   40%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(-10deg);
   }
   45%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   50%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(10deg);
   }
   55%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   60%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(-10deg);
   }
   65%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   70%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(10deg);
   }
   75%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   80%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(-10deg);
   }
   85%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   90%{
       top: 400px;
       opacity: 1;
       transform: scale(0.9) rotate(0deg);
   }
   95%{
       top: 400px;
       opacity: 1;
       transform: scale(1.1) rotate(0deg);
   }
   100%{
       top: 400px;
       opacity: 1;
       transform: scale(1) rotate(0deg);
   }
}
@keyframes eight-c{
   0%{
       left: 250px;
       opacity: 0;
   }
   50%{
       left: -270px;
       opacity: 1;
   }
   75%{
       left: -230px;
       opacity: 1;
   }
   100%{
       left: -250px;
       opacity: 1;
   }
}
@keyframes eight-d{
   0%{
       left: -100px;
       opacity: 0;
   }
   50%{
       left: 245px;
       opacity: 1;
   }
   75%{
       left: 205px;
       opacity: 1;
   }
   100%{
       left: 225px;
       opacity: 1;
   }
}
@keyframes eight-f{
   from{
       top: 475px;
       opacity:1;
   }
   to{
       top:455px;
       opacity: 0;
   }
}
//第八页动画设置结束

//第九页动画设置开始
//第一个开始
@keyframes nine-a{
   0%{
       left: 500px;
       opacity: 0;
   }
   50%{
       left: -160px;
       opacity: 1;
   }
   75%{
       left: -120px;
       opacity: 1;
   }
   100%{
       left: -140px;
       opacity: 1;
   }
}
@keyframes nine-b{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes nine-c{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 154px;
       opacity: 1;
   }
   75%{
       top: 114px;
       opacity: 1;
   }
   100%{
       top: 134px;
       opacity: 1;
   }
}
//第一个结束
//第二个开始
@keyframes nine-d{
   0%{
       left: 500px;
       opacity: 0;
   }
   50%{
       left: 130px;
       opacity: 1;
   }
   75%{
       left: 170px;
       opacity: 1;
   }
   100%{
       left: 150px;
       opacity: 1;
   }
}
@keyframes nine-e{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes nine-f{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 154px;
       opacity: 1;
   }
   75%{
       top: 114px;
       opacity: 1;
   }
   100%{
       top: 134px;
       opacity: 1;
   }
}
//第二个结束
//第三个开始
@keyframes nine-g{
   0%{
       left: 500px;
       opacity: 0;
   }
   50%{
       left: -160px;
       opacity: 1;
   }
   75%{
       left: -120px;
       opacity: 1;
   }
   100%{
       left: -140px;
       opacity: 1;
   }
}
@keyframes nine-h{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes nine-i{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 302px;
       opacity: 1;
   }
   75%{
       top: 262px;
       opacity: 1;
   }
   100%{
       top: 282px;
       opacity: 1;
   }
}
//第三个结束
//第四个开始
@keyframes nine-j{
   0%{
       left: 500px;
       opacity: 0;
   }
   50%{
       left: 130px;
       opacity: 1;
   }
   75%{
       left: 170px;
       opacity: 1;
   }
   100%{
       left: 150px;
       opacity: 1;
   }
}
@keyframes nine-k{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes nine-l{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 302px;
       opacity: 1;
   }
   75%{
       top: 262px;
       opacity: 1;
   }
   100%{
       top: 282px;
       opacity: 1;
   }
}
//第四个结束
//第五个开始
@keyframes nine-n{
   0%{
       left: 500px;
       opacity: 0;
   }
   50%{
       left: -160px;
       opacity: 1;
   }
   75%{
       left: -120px;
       opacity: 1;
   }
   100%{
       left: -140px;
       opacity: 1;
   }
}
@keyframes nine-m{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes nine-o{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 452px;
       opacity: 1;
   }
   75%{
       top: 412px;
       opacity: 1;
   }
   100%{
       top: 432px;
       opacity: 1;
   }
}
//第五个结束
@keyframes nine-p{
   0%{
       top: 500px;
       opacity: 0;
   }
   50%{
       top: 320px;
       opacity: 1;
   }
   75%{
       top: 340px;
       opacity: 1;
   }
   100%{
       top: 330px;
       opacity: 1;
   }
}
@keyframes nine-q{
   0%{
       left: 400px;
       opacity: 0;
   }
   50%{
       left: 180px;
       opacity: 1;
   }
   75%{
       left: 200px;
       opacity: 1;
   }
   100%{
       left: 190px;
       opacity: 1;
   }
}
@keyframes nine-r{
   from{
       left: 190px;
       opacity: 0;
   }
   to{
       left: 188px;
       opacity: 1;
   }
}
@keyframes nine-s{
   0%{
       transform: rotate(-100deg) scale(0);
   }
   50%{
       transform: rotate(-100deg) scale(1.2);
   }
   75%{
       transform: rotate(-100deg) scale(0.9);
   }
   100%{
       transform: rotate(-100deg) scale(1);
   }
}
@keyframes nine-span{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
//第九页动画设置结束

//第十页动画设置开始
@keyframes ten-a{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes ten-b{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 40px;
       opacity: 1;
   }
   75%{
       top: 0px;
       opacity: 1;
   }
   100%{
       top: 20px;
       opacity: 1;
   }
}
@keyframes ten-c{
   from{
       opacity: 0;
   }
   to{
       opacity: 1;
   }
}
@keyframes ten-d{
   0%{
       transform: rotate(0deg);
       left: -400px;
       opacity: 0;
   }
   10%{
       left: 180px;
       opacity: 1;
   }
   20%{
       left: 140px;
       opacity: 1;
   }
   30%{
       left: 160px;
       opacity: 1;
   }
   40%{
       left: 160px;
       opacity: 1;
   }
   50%{
       transform: rotate(0deg);
       left: 160px;
       opacity: 1;
   }
   60%{
       transform: rotate(0deg);
       left: 160px;
       opacity: 1;
   }
   70%{
       transform: rotate(0deg);
       left: 160px;
       opacity: 1;
   }
   80%{
       transform: rotate(0deg);
       left: 160px;
       opacity: 1;
   }
   90%{
       transform: rotate(0deg);
       left: 160px;
       opacity: 1;
   }
   100%{
       transform: rotate(0deg);
       left: 160px;
       opacity: 0;
   }
}
@keyframes ten-e{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes ten-p-1{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.1);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes ten-f{
   0%{
       left: -500px;
       opacity: 0;
   }
   20%{
       left: -130px;
       opacity: 1;
   }
   40%{
       left: -170px;
       opacity: 1;
   }
   60%{
       left: -150px;
       opacity:1;
   }
   80%{
       left: -150px;
       opacity:0;
   }
   90%{
       left: -150px;
       opacity:0;
   }
}
@keyframes ten-i{
   0%{
       opacity: 1;
       transform: rotate(0deg);
   }
   20%{
       opacity: 1;
       transform: rotate(0deg);
   }
   40%{
       opacity: 1;
       transform: rotate(-6deg);
   }
   60%{
       opacity: 1;
       transform: rotate(6deg);
   }
   80%{
       opacity: 1;
       transform: rotate(-6deg);
   }
   100%{
       opacity: 1;
       transform: rotate(0deg);
   }
}
@keyframes ten-g{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.2);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes ten-p-2{
   0%{
       transform: scale(0);
   }
   50%{
       transform: scale(1.1);
   }
   75%{
       transform: scale(0.9);
   }
   100%{
       transform: scale(1);
   }
}
@keyframes ten-j{
   0%{
       opacity: 1;
       transform: rotate(0deg);
   }
   10%{
       opacity: 1;
       transform: rotate(0deg);
   }
   20%{
       opacity: 1;
       transform: rotate(0deg);
   }
   30%{
       opacity: 1;
       transform: rotate(0deg);
   }
   40%{
       opacity: 1;
       transform: rotate(0deg);
   }
   50%{
       opacity: 1;
       transform: rotate(0deg);
   }
   60%{
       opacity: 1;
       transform: rotate(6deg);
   }
   70%{
       opacity: 1;
       transform: rotate(-6deg);
   }
   80%{
       opacity: 1;
       transform: rotate(6deg);
   }
   90%{
       opacity: 1;
       transform: rotate(-6deg);
   }
   100%{
       opacity: 1;
       transform: rotate(0deg);
   }
}
@keyframes ten-h{
   0%{
       top: -200px;
       opacity: 0;
   }
   50%{
       top: 40px;
       opacity: 1;
   }
   75%{
       top: 0px;
       opacity: 1;
   }
   100%{
       top: 20px;
       opacity: 1;
   }
}